import React, { useState } from "react";
// import { PlusOutlined } from "@ant-design/icons";
import { Form, Input, Checkbox, Button } from "antd";
import "./email.css";
const FormDisabledDemo = () => {
  const [componentDisabled, setComponentDisabled] = useState(true);

  const onFormLayoutChange = ({ disabled }) => {
    setComponentDisabled(disabled);
  };

  return (
    <div>
      <>
        <Checkbox
          checked={componentDisabled}
          onChange={(e) => setComponentDisabled(e.target.checked)}
        >
          是否开启发件箱设置
        </Checkbox>
        <Form
          labelCol={{
            span: 4,
          }}
          wrapperCol={{
            span: 14,
          }}
          layout="horizontal"
          onValuesChange={onFormLayoutChange}
          disabled={componentDisabled}
        >
          {/* <Form.Item label="Chekbox" name="disabled" valuePropName="checked">
          <Checkbox>Checkbox</Checkbox>
        </Form.Item> */}
          {/* <Form.Item label="Radio">
          <Radio.Group>
            <Radio value="apple"> Apple </Radio>
            <Radio value="pear"> Pear </Radio>
          </Radio.Group>
        </Form.Item> */}
          <Form.Item label="JMAIL组件">
            <span>√支持</span>
          </Form.Item>
          <Form.Item label="SMTP">
            <Input />
          </Form.Item>
          <Form.Item label="发件箱">
            <Input />
          </Form.Item>
          <Form.Item label="端 口">
            <Input />
          </Form.Item>
          <Form.Item label="密 码">
            <Input />
          </Form.Item>
          <Form.Item label="发件者名称">
            <Input />
          </Form.Item>
        </Form>
      </>
      <div>
        <Button type="primary" htmlType="submit" className="preBtn">
          立即发送
        </Button>
        <Button type="primary" htmlType="submit" className="lastBtn">
          关闭
        </Button>
      </div>
    </div>
  );
};

export default () => <FormDisabledDemo />;
